<template>
	<view class="common-navigation">
		<image class="common-navigation_bg" src="/static/image_navbg.png"></image>
		<image v-if="isShowHeader" class="def-header" src="/static/nav_header.png"></image>
		<view class="slot-header">
			<slot name="header" text="头部:我是一个字符串" class="slot-header"></slot>
		</view>
		<view class="nav-title" v-if="isShowHeader"> 
			<view class="title-left">
				<image class="title-icon1" src="/static/header-icon1.png"></image>
				{{title}}
			</view>
			<view class="title-right">
				切换主题
				<image class="title-icon2" src="/static/header-icon2.png"></image>
			</view>
		</view>
		<view class="triangle" v-if="isShowHeader"></view>
	</view>
</template>

<script>
	export default {
		props: {
			isShowHeader: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			}
		},
	}
</script>

<style scoped lang="scss">
	.common-navigation {
		width: 100%;
		height: 294rpx;
		position: relative;

		.common-navigation_bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}

		.def-header {
			width: 486rpx;
			height: 58rpx;
			left: 36rpx;
			top: 106rpx;
			position: absolute
		}

		.slot-header {  
			position: absolute;
			left: 36rpx;
			top: 106rpx;
			color: #fff; 
		}

		.nav-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: 52rpx;
			width: 100%;
			padding: 0 32rpx;

			.title-left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;

				.title-icon1 {
					width: 33rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}

			.title-right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;

				.title-icon2 {
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}
		}


		/* 白色三角形样式 */
		.triangle {
			border-left: 22rpx solid transparent;
			border-right: 22rpx solid transparent;
			border-bottom: 26rpx solid white;
			position: absolute;
			bottom: -1rpx;
			left: 150rpx;
		}
	}
</style>